<!--首页统计-->
<template>
  <div class="app-container">
    <!-- 未查询到黑号弹窗 -->
    <div class="bg-color" v-if="noblacknum">
      <div class="box">
        <div class="icons" @click="noblacknum=false"><img src="../assets/images/close.png"/></div>
        <div class="queren"><img src="../assets/images/queren.png"/></div>
        <div class="texts">未查询到黑名单记录，可交易！</div>
        <button class="qrbtn" @click="noblacknum=false">确定</button>
      </div>
    </div>
    <!-- 黑号记录弹窗 -->
    <div class="bg-color" v-if="blacknum">
      <table class="tables">
        <tr class="titles"><p class="txts">黑号记录</p></tr>
        <tr class="title">
          <td>排序</td>
          <td>游戏品类</td>
          <td>游戏账号</td>
          <td>姓名</td>
          <td>手机号</td>
          <td>身份证号</td>
          <td>拉黑原因</td>
          <td>拉黑时间</td>
        </tr>
        <tr v-for=" (itme,indx) in ListBase" :key=indx>
          <td>{{ itme.id }}</td>
          <td>{{ itme.phoneNumber }}</td>
          <td>{{ itme.gmAccount }}</td>
          <td>{{ itme.name }}</td>
          <td>{{ itme.phoneNumber }}</td>
          <td>{{ itme.idCard }}</td>
          <td>{{ itme.information }}</td>
          <td>{{ itme.createTime }}</td>
        </tr>
        <tr>
          <td colspan="8">
            <button class="confirm" @click="blacknum=false">确认</button>
          </td>
          <!-- <button class="confirm">确认</button> -->
        </tr>
      </table>
    </div>

    <!--第一行-->
    <div class="card">
      <p>交易大数据</p>
      <div class="row">
        <div class="col">
          <div class="wrap dingdanshuliang">
            <img src="../assets/home/dingdanshuliang.png" alt="">
            <div class="count">
              <div class="count-num">{{ topeInt || 0 }}
              </div>
              <div class="count-txt">订单总数</div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="wrap dingdanjine">
            <img src="../assets/home/dingdanjine.png" alt="">
            <div class="count">
              <div class="count-num">
                {{ (distributionOfSalesChannels.salesData && distributionOfSalesChannels.salesData.singular) || 0 }}
              </div>
              <div class="count-txt">销售单量</div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="wrap dingdanxiaoshou">
            <img src="../assets/home/dingdanxiaoliang.png" alt="">
            <div class="count">
              <div class="count-num">
                {{ (distributionOfSalesChannels.salesData && distributionOfSalesChannels.salesData.bigDecimal) || 0 }}
              </div>
              <div class="count-txt">销售金额</div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="wrap huishoudanliang">
            <img src="../assets/home/huishoudanliang.png" alt="">
            <div class="count">
              <div class="count-num">
                {{ (accountSource.totalNumberAndAmount && accountSource.totalNumberAndAmount.singular) || 0 }}
              </div>
              <div class="count-txt">回收单量</div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="wrap huishoujine">
            <img src="../assets/home/huishoujine.png" alt="">
            <div class="count">
              <div class="count-num">
                {{ (accountSource.totalNumberAndAmount && accountSource.totalNumberAndAmount.bigDecimal) || 0 }}
              </div>
              <div class="count-txt">回收金额</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--第二行 游戏品类-->
    <div class="game">
      <div class="game-item" style="height: 239px;">
        <div class="game-item-l">
          <div class="game-item-l-title">
            <p>交易游戏品类回收</p>
            <el-popover placement="top-start" trigger="hover">
              <!--弹框内容-->
              <div style="padding: 10px;max-height: 200px;overflow-y: auto;">
                <el-row>
                  <el-col :span="24">
                    <div class="game-item-l-con-record" v-for="(item,indx) in recyclingDataGame">
                      <div class="l-item-name">
                        <span class="block" :style="parseColor(indx)"/> <span
                        class="name">{{ item.gameName }}-{{ item.singular || 0 }}单</span>
                      </div>
                      <div class="price">
                        回收(元){{ item.bigDecimal || 0 }}
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>

              <el-icon slot="reference" class="el-icon-warning"
                       style="margin-left: 8px; font-size: 18px;color:#C4CAD4;"></el-icon>
            </el-popover>
          </div>
          <div class="game-item-l-con">
            <div class="game-item-l-con-record" v-if="indx <= 4" v-for="(item,indx) in recyclingDataGame">
              <div class="l-item-name">
                <span class="block" :style="parseColor(indx)"/> <span
                class="name">{{ item.gameName }}-{{ item.singular || 0 }}单</span>
              </div>
              <div class="price">
                回收(元){{ item.bigDecimal || 0 }}
              </div>
            </div>
          </div>
        </div>
        <div class="game-item-r">
          <div class="desc" v-if="recyclingDataGame.length > 0">交易游戏<br>品类回收</div>
          <circleEcharts id="1" v-if="recyclingDataGame.length > 0" :data="recyclingDataGame"></circleEcharts>
        </div>
      </div>

      <div class="game-item" style="height: 239px;">
        <div class="game-item-l">
          <div class="game-item-l-title">
            <p>交易游戏品类销售</p>
            <el-popover placement="top-start" trigger="hover">
              <!--弹框内容-->
              <div style="padding: 10px;max-height: 200px;overflow-y: auto;">
                <el-row>
                  <el-col :span="24">
                    <div class="game-item-l-con-record" v-for="(item,indx) in salesDataGameDashboard">
                      <div class="l-item-name">
                        <span class="block" :style="parseColor(indx)"/> <span
                        class="name">{{ item.gameName }}-{{ item.singular || 0 }}单</span>
                      </div>
                      <div class="price">
                        回收(元){{ item.bigDecimal || 0 }}
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <el-icon slot="reference" class="el-icon-warning"
                       style="margin-left: 8px; font-size: 18px;color:#C4CAD4;"></el-icon>
            </el-popover>
          </div>
          <div class="game-item-l-con">
            <div class="game-item-l-con-record" v-if="indx <= 4" v-for="(item,indx) in salesDataGameDashboard"
                 :key="indx">
              <div class="l-item-name">
                <span class="block" :style="parseColor(indx)"/> <span
                class="name">{{ item.gameName }}-{{ item.singular || 0 }}单</span>
              </div>
              <div class="price">
                回收(元){{ item.bigDecimal || 0 }}
              </div>
            </div>
          </div>
        </div>
        <div class="game-item-r">
          <div class="desc" v-if="salesDataGameDashboard.length > 0">交易游戏<br>品类销售</div>
        </div>
      </div>
    </div>

    <!--第三行-->
    <div class="flex-warp">
      <div class="card" id="cards">
        <p>今日交易订单</p>
        <div class="row">
          <!-- <div class="col">
            <div class="wrap">
              <img class="b1" src="../assets/home/jinriyichangyichuli.png" alt="">
              <div class="count">
                <div class="count-num">{{abnormalInformation && abnormalInformation.exceptionProcessedToday || 0}}</div>
                <div class="count-txt">今日异常已处理</div>
              </div>
            </div>
          </div> -->
          <div class="col">
            <div class="wrap">
              <img class="b2" src="../assets/home/weishouzhaohui.png" alt="">
              <div class="count">
                <div class="count-num">{{ abnormalInformation && abnormalInformation.abnormalRetrievalInt || 0 }}</div>
                <div class="count-txt">未售找回</div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="wrap">
              <img class="b3" src="../assets/home/yishouzhaohui.png" alt="">
              <div class="count">
                <div class="count-num">{{ abnormalInformation && abnormalInformation.discoveredInt || 0 }}</div>
                <div class="count-txt">已售找回</div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="wrap">
              <img class="b4" src="../assets/home/weishouyichang.png" alt="">
              <div class="count">
                <div class="count-num">{{ abnormalInformation && abnormalInformation.abnormalSalesCInt || 0 }}</div>
                <div class="count-txt">未售异常</div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="wrap">
              <img class="b5" src="../assets/home/yishouyichang.png" alt="">
              <div class="count">
                <div class="count-num">{{ abnormalInformation && abnormalInformation.abnormalsalesInt || 0 }}</div>
                <div class="count-txt">已售异常</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--第四行-->
    <div class="game">
      <div class="game-item game-item4">
        <div class="game-item-l-title">
          <p>近7日库存走势</p>
        </div>
        <div class="game-item-con">
        </div>
      </div>

      <div class="game-item game-item4">
        <div class="game-item-l-title" style="margin-bottom: 20px;">
          <p>今日财务支出和收入</p>
        </div>
        <div class="game-item-con" style=" display: flex;justify-content: space-around;">
          <div class="game-item-con-item">
            <span class="item-title">今日财务支出（元）</span> <span class="item-money">{{ financial.expenditure || 0 }}</span>
            <div class="item-compare">
              <span class="item-compare-yestoday">对比昨日</span> <span
              class="item-compare-num">{{ financial.percentag || 0 }}%</span>
            </div>
          </div>
          <div class="game-item-con-item yellow-bg">
            <span class="item-title">今日财务收入（元）</span> <span class="item-money">{{ financial.income || 0 }}</span>
            <div class="item-compare">
              <span class="item-compare-yestoday">对比昨日</span> <span
              class="item-compare-num">{{ financial.incomepercentag || 0 }}%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    //过渡动画
    import {
        getcurrentAccountstatus,
        getSalesDataDashboard,
        getLogLogPlot,
        gettfinancia,
    } from '@/api/business/home.js'
    import overView from '../components/InexUseCom/overView.vue';
    import {colorArr} from "@/utils/color";
    import draggable from 'vuedraggable';

    export default {
        components: {overView,draggable},
        data() {
            return {
                //状态数据
                TodayCount: '',
                status: {},
                colors: [
                    {color: '#563BFF', percentage: 20},
                ],
                colors1: [
                    {color: '#FF7049', percentage: 20},
                ],
                colors2: [
                    {color: '#499DFF', percentage: 20},
                ],
                colors3: [
                    {color: '#8C35FF', percentage: 20},
                ],
                Black: {
                    gmAccount: '',//游戏账号
                    phoneNumber: '',//手机号
                    idCard: '',//身份证
                    name: '',//姓名
                    information: '',//拉黑信息
                    remarks: '',//备注
                    gmName: '',//游戏名称
                },//添加信息类
                labelPosition: 'right',
                // formLabelAlign: {
                //   name: '',
                //   region: '',
                //   type: ''
                // },
                ListBase: [], //查询返回黑号数据
                from: {},
                topeInt: '',//订单总数
                abnormalInformation: {},//实时账号数据
                recyclingDataGame: [],//回收数据看板
                accountSource: {},//回收数据 账号来源分布
                distributionOfSalesChannels: {},//销售数据，销售渠道分布
                salesDataGameDashboard: [],//销售数据看板
                Sevendayinventorypl: [],//近七日库存动态
                financial: {},//财务信息
                blacknum: false,//黑号记录弹窗状态
                noblacknum: false,//无黑号记录弹窗
                addblacknum: false,//黑号添加弹窗
                texts: '',//黑号查询输入框
                blacknumid: '',
            }
        },

        methods: {

         
            // 颜色块
            parseColor(indx) {
                return "background-color:" + colorArr[indx].startColor;
            },

            getData() {
                // 七日动态
                getLogLogPlot().then(res => {
                    // abnormalBigDecimal 库存金额
                    // singular 库存数量
                    // abnormaInt回收库存号
                    // bigDecimal  回收库存号金额
                    this.Sevendayinventorypl = res.data.Sevendayinventorypl;//回收和动态
                    // this.Sevendaysalesdata =  res.data.Sevendaysalesdata;//七日销售数据
                })

                getSalesDataDashboard().then(res => {
                    let {
                        salesDataGameDashboard,
                        recyclingDataGame,
                        accountSource,
                        distributionOfSalesChannels,
                        ProfitFromSingleProductSales,
                        topeInt
                    } = res.data;

                    //回收数据
                    this.accountSource = accountSource;

                    //回收数据看板
                    this.recyclingDataGame = recyclingDataGame;
                    //销售数据看板
                    this.salesDataGameDashboard = salesDataGameDashboard;
                    //销售数据，销售渠道分布
                    this.distributionOfSalesChannels = distributionOfSalesChannels;
                    //单品销售利润
                    //this.ProfitFromSingleProductSales = ProfitFromSingleProductSales;
                    this.topeInt = topeInt;
                })

                // 实时账号
                getcurrentAccountstatus().then(res => {
                    this.abnormalInformation = res.data.abnormalInformation;
                });

                gettfinancia().then(res => {
                    this.financial = res.data;
                })
            }
        },
        created() {
            // this.getData();
        }
    }
</script>

<style lang="scss" scoped>

  @function vw($width) {
    @return ($width * 100vw / 1920);
  }

  @function vh($height) {
    @return ($height * 100vh / 1080);
  }

  .app-container {
    background-color: #EDEFF9;
    padding: 30px;

    p {
      position: relative;
      margin: 0;
      font-family: Source Han Sans;
      display: inline-block;
      font-size: 17px;
      font-weight: 600;
      line-height: normal;
      font-feature-settings: "kern" on;
      color: #3D3D3D;
      margin: 0 0 vh(18) vw(8);
      border-left: 4px solid #116BFF;
      padding-left: 8px;
    }

    .flex-warp {
      display: flex;
      justify-content: space-between;

      .black-num {
        width: 18%;
        padding: vh(20) vw(20) vh(20) vw(20);
        background-color: #fff;
        border-radius: 16px;
        margin-bottom: vh(20);

        //添加黑号
        .black-warp {
          display: flex;
          justify-content: space-between;

          div {
            width: 25px;
            height: 25px;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }

        .txt {
          font-size: vh(18);
        }

        ::v-deep .el-input {
          margin-bottom: 30px;

          .el-input__inner {
            border-radius: 20px;
            height: vh(48);
            background: rgba(211, 220, 234, 0.24);

            &::-webkit-input-placeholder {
              color: #C4CAD4;
              font-size: 14px;
            }
          }
        }

        ::v-deep.el-input__suffix {
          right: 14px;
          top: 50%;
          transform: translateY(-50%);
          font-size: vh(20);
          color: #C4CAD4;
        }

        button {
          position: relative;
          left: 50%;
          transform: translateX(-50%);
          width: 120px;
          height: 38px;
          background-color: #116BFF;
          color: white;
          border-radius: 10px;
        }
      }
    }

    #cards {
      width: 80%;
    }

    .card {
      padding: vh(20) vw(20) vh(20) vw(20);
      border-radius: 16px;
      margin-bottom: vh(20);
      background-color: #F5F6FB;

      .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        // width: 50%;

        .col {
          flex: 1;
          background-color: #fff;
          border-radius: 16px;

          &:not(:last-child) {
            margin-right: vw(20);
          }

          .wrap {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            height: 129px;
            padding-left: 12%;
            width: 100%;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            overflow: hidden;

            img {
              width: 78px;
              height: 78px;
              margin-right: 10%;
              border-radius: 14px;
            }

            .b1 {
              box-shadow: 0px 11px 28px -2px rgba(54, 128, 175, 0.33);
            }

            .b2 {
              box-shadow: 0px 11px 28px -2px rgba(163, 187, 226, 0.33);
            }

            .b3 {
              box-shadow: 0px 11px 28px -2px rgba(175, 70, 54, 0.33);
            }

            .b4 {
              box-shadow: 0px 11px 28px -2px rgba(54, 128, 175, 0.33);
            }

            .b5 {
              box-shadow: 0px 11px 28px -2px rgba(54, 128, 175, 0.33);
            }

            .count {
              .count-num {
                font-family: HarmonyOS Sans SC;
                font-size: 28px;
                font-weight: 900;
                line-height: normal;
                font-feature-settings: "kern" on;
                color: #3D3D3D;
                margin-bottom: vh(16);
              }

              .count-txt {
                font-family: Source Han Sans SC;
                font-size: 14px;
                color: #999;
              }
            }
          }

          .dingdanshuliang {

            img {
              box-shadow: 0px 11px 28px -2px rgba(54, 128, 175, 0.33);
            }
          }

          .dingdanjine {

            img {
              box-shadow: 0px 11px 28px -2px rgba(54, 128, 175, 0.33);
            }
          }

          .dingdanxiaoshou {

            img {
              box-shadow: 0px 11px 28px -2px rgba(175, 116, 54, 0.33);
            }
          }

          .huishoudanliang {

            img {
              box-shadow: 0px 11px 28px -2px rgba(54, 128, 175, 0.33);
            }
          }

          .huishoujine {
            img {
              box-shadow: 0px 11px 28px -2px rgba(175, 70, 54, 0.33);
            }
          }
        }
      }
    }

    .game {
      display: flex;
      width: 100%;
      margin-bottom: vh(20);

      .game-item {
        display: flex;
        width: 50%;
        background-color: #fff;
        border-radius: 16px;
        overflow: hidden;

        &:nth-child(1) {
          margin-right: vw(30);
        }

        .game-item-l {
          width: 55%;
          padding: vh(20) 0 0 vw(20);

          .game-item-l-title {
            p {
              font-family: Source Han Sans;
              font-size: 17px;
              font-weight: 600;
              line-height: normal;
              font-feature-settings: "kern" on;
              color: #3D3D3D;
            }
          }

          .game-item-l-con {
            overflow: auto;

            &::-webkit-scrollbar {
              display: none;
              width: 0;
            }
          }
        }

        .game-item-con {
          height: vh(300);

          .game-item-con-item {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: vw(300);
            height: vh(250);
            border-radius: 21px;
            box-sizing: border-box;
            border: 1px solid #D0DAFE;
            background-image: linear-gradient(45deg, #D2DBFE 10%, #fff 50%, #fff 50%, #D2DBFE 100%);

            .item-title {
              width: vw(144);
              height: vh(23);
              font-family: Source Han Sans;
              font-size: vh(16);
              font-feature-settings: "kern" on;
              color: #3D3D3D;
              margin-bottom: vh(10);
            }

            .item-money {
              font-family: HarmonyOS Sans SC;
              font-size: vh(30);
              font-weight: 900;
              font-feature-settings: "kern" on;
              color: #3D3D3D;
              margin-bottom: vh(20);
            }

            .item-compare {
              .item-compare-yestoday {
                font-family: Source Han Sans;
                font-size: vh(16);
                font-feature-settings: "kern" on;
                color: #3D3D3D;
              }

              .item-compare-num {
                font-family: Source Han Sans;
                font-size: vh(16);
                font-feature-settings: "kern" on;
                color: #3D3D3D;
              }
            }
          }

          .yellow-bg {
            box-sizing: border-box;
            border: 1px solid #FCE9D7;
            background-image: linear-gradient(45deg, #FDE6D2 10%, #fff 50%, #fff 50%, #FDE6D2 100%);
          }
        }

        .game-item-r {
          position: relative;
          width: 45%;
          overflow: hidden;

          .desc {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 99;
            font-size: 15px;
            font-weight: 600;
            color: #96A7C2;
          }
        }
      }

      .game-item4 {
        display: block;
        padding: vh(20) vw(20);
      }
    }
  }

  .game-item-l-con-record {
    display: flex;
    background: rgba(196, 202, 212, 0.14);
    height: 25px;
    line-height: 25px;
    padding-left: vw(30);

    &:not(:nth-last-child(1)) {
      margin-bottom: 8px;
    }

    .l-item-name {
      width: vw(210);
      display: flex;
      align-items: center;

      .block {
        width: 16px;
        height: 10px;
        border-radius: 4px;
        background-color: #00afff;
        margin-right: vw(6);
      }

      .name {
        width: 80%;
        font-feature-settings: "kern" on;
        color: #333;
        font-family: 思源黑体;
        font-size: vh(12);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .price {
      width: vw(170);
      font-feature-settings: "kern" on;
      color: #333;
      font-family: 思源黑体;
      font-size: vh(12);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  // 黑号记录样式
  .bg-color {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
    width: 100%;
    height: 100%;

    .el-form el-form--label-right {
      width: 500px;
    }

    //添加黑号
    .addfroms {
      width: 450px;
      padding: 30px 30px;
      background-color: white;
      box-shadow: 3px 3px 3px #3D3D3D;
      margin: 15% auto;
      border-radius: 25px;

      P {
        font-size: 18px;
      }

      .addforms-warp {
        display: flex;
        justify-content: space-around;
        height: 50px;
        line-height: 50px;
        margin-top: 10px;

        div {
          width: 25%;
        }
      }

      span {
        color: #116BFF;
      }

      input {
        width: 250px;
        padding: 8px 8px;
        margin-top: 10px;
        margin-right: 30px;
        border-radius: 10px;
        border: 1px solid gainsboro;
      }

      button {
        padding: 10px 40px;
        margin-top: 30px;
        margin-left: 15%;
        color: white;
        border-radius: 10px;
        border: none;
      }

      .closes {
        background-color: lightblue;
      }

      .qd {
        background-color: #116BFF;
      }
    }
  }

  //未查询到黑号记录弹窗样式
  .box {
    background-color: white;
    width: 300px;
    margin: 20% auto;
    padding: 15px 2px;
    border-radius: 15px;
    text-align: center;

    .icons {
      width: 20px;
      height: 20px;
      margin-left: 265px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .texts {
      padding: 20px 0px;
      font-size: 14px;
    }

    .qrbtn {
      padding: 5px 25px;
      letter-spacing: 2px;
      border-radius: 5px;
      border: none;
      background-color: #116BFF;
      color: white;
    }
  }

  //查询到黑号记录弹窗样式
  .tables {
    background-color: white;
    border-collapse: collapse;
    // border: 1px solid black;
    margin: 10% auto;
    padding: 30px 0px;
    text-align: center;
    border-radius: 20px;
    box-shadow: 3px 3px 5px gray;

    tr {
      td {
        border: 1px solid #E2E6F5;
        padding: 10px 50px;
      }
    }

    tr:nth-child(even) {
      background-color: #F8FAFE;
    }

    .titles {

      .txts {
        font-size: 18px;
        margin-top: 20px;
      }
    }

    .title {
      td {
        background-color: #116BFF;
        color: white;
        padding: 10px 50px;
        letter-spacing: 2px;
      }
    }

    .confirm {
      margin-top: 20px;
      margin-bottom: 20px;
      // margin-left: 800px;
      padding: 10px 30px;
      border-radius: 10px;
      border: none;
      background-color: #116BFF;
      color: white;
      letter-spacing: 2px;
    }
  }


  ::v-deep .el-dialog {
    border-radius: 30px;
  }
</style>
